<template>
    <el-card class="area-box-card" :class="type" shadow="hover">
        <div class="text item">
            <a class="area-name" @click="goToAreaPost">{{area.name}}</a>
        </div>
        <div class="text item">
            <span>{{area.description?area.description:'该区域没有描述'}}</span>
        </div>
        <div class="text item">
            <span style="float: left">关注数量：{{area.attentionCount}}</span>
            <span style="float: right">项数量：{{area.itemCount}}</span>
        </div>
        <br>
        <div class="item">
            <el-alert
                :title="status.text"
                :type="status.type"
                :closable="false">
            </el-alert>
        </div>
        <div class="area-attention-btn" v-if="area.status!==2">
            <el-button v-if="!attentionArea(area.id)"
                       type="success"
                       size="small"
                       :disabled="area.name==='root'"
                       @click="attention" round>关注
            </el-button>
            <el-button v-else type="danger" size="small" @click="removeAttention" round>取消关注</el-button>
            <el-button type="text" :disabled="area.name==='root'" @click="goToAttentionUsers">查询关注该区域的用户</el-button>
        </div>
    </el-card>
</template>

<script>
    import { type, areaStatus } from '@/constant'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'areaCard',
        data () {
            return {
                type: null
            }
        },
        props: ['area'],
        mounted () {
            this.type = type[Math.floor(Math.random() * type.length)]
            if (this.getUser) {
                this.action(this.currentAttentionAreasAction())
            }
        },
        computed: {
            ...mapGetters({
                attentionArea: 'area/attentionArea',
                getUser: 'user/getUser'
            }),
            status () {
                return areaStatus[this.area.status]
            }
        },
        methods: {
            ...mapActions('area', {
                currentAttentionAreasAction: 'currentAttentionAreas',
                attentionAreaAction: 'attentionArea',
                removeAttentionAreaAction: 'removeAttentionArea'
            }),
            attention () {
                this.action(this.attentionAreaAction(this.area.id), data => {
                    this.$message.success('关注成功')
                    this.area.attentionCount++
                    this.action(this.currentAttentionAreasAction())
                })
            },
            removeAttention () {
                this.action(this.removeAttentionAreaAction(this.area.id), data => {
                    this.$message.success('取消关注成功')
                    this.area.attentionCount--
                    this.action(this.currentAttentionAreasAction())
                })
            },
            goToAreaPost () {
                if (this.area.name === 'root') {
                    this.$message.warning('根区域不会有内容的︿(￣︶￣)︿')
                } else {
                    this.$router.push(`area/${this.area.name}`)
                }
            },
            goToAttentionUsers () {
                if (this.area.name === 'root') {
                    this.$message.warning('根区域不会有关注的︿(￣︶￣)︿')
                } else {
                    this.$router.push(`/attention/area/${this.area.id}`)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/scss';

    .text {
        font-size: 14px;
    }

    .item {
        padding: 10px 0;

        .area-name {
            font-size: 18px;
            font-weight: bolder;
        }

        a {
            font-weight: bolder;
            font-size: 32px;

            text-decoration: none;
            cursor: pointer;
        }

        a:hover {
            color: rgba(255, 151, 60, 0.8);
        }

        a:active {
            color: rgba(255, 86, 25, 0.8);
        }
    }

    .area-box-card {
        z-index: 999;

        .area-attention-btn {
            text-align: center;
        }
    }
</style>
